import { useRef } from 'react';

import Fault from './Fault';
import Offline from './Offline';
import FaultPop from './FaultPop';
import potImg from '@/assets/images/blender.png';

import useStore from '@/store/index';
import { statusTextConvert } from '@/utils/filters.ts';

import './index.less';

export default function Banner() {
  const { info } = useStore();

  const { state: status, isOnline, fault, remainder } = info;

  const childRefs: any = useRef(null);
  // 故障弹窗
  function showErrorDetail() {
    childRefs.current.show();
  }

  function filterBg(): string {
    if (!isOnline) {
      // 离线
      return '#737373';
    } else {
      if (fault) {
        // 故障
        return '#FA4B4B';
      } else {
        // 在线
        return '#16BA7E';
      }
    }
  }
  return (
    <div>
      <div
        className="banner"
        style={{
          background: filterBg()
        }}
      >
        <div className="pot">
          <img src={potImg} alt="" />
        </div>
        <div className="status">
          {/* 设备离线的时候，不显示设备的状态小圆圈样式 */}
          {isOnline && <span></span>}
          <div>{statusTextConvert(status, isOnline)}</div>
        </div>
        {/* 工作剩余时间 */}
        <div className="worktime">
          {status === 1 && remainder > 0 && (
            <span>运行剩余时间: {remainder}min</span>
          )}
        </div>
      </div>

      {/* 故障 */}
      {fault !== 0 && (
        <div onClick={showErrorDetail}>
          <Fault faultProps={fault} />
        </div>
      )}
      {/* 故障详情
       * 在 forwardRef 中接收父组件的参数 {...{ fault }}
       */}
      <FaultPop {...{ fault }} ref={childRefs} />

      {/* 离线, 离线的权限大于故障 */}
      {!isOnline && <Offline />}
    </div>
  );
}
